<template>
  <div class="app">
    <div class="box">
      <div class="img-box">
        <img src="..\..\assets\img\logo.png" alt />
      </div>
      <div class="nav">
        <van-tabs v-model="activeName" @click="onClick">
          <van-tab title="推荐音乐" name="rec"></van-tab>
          <van-tab title="热歌榜" name="hotSong"></van-tab>
          <van-tab title="搜索" name="search"></van-tab>
        </van-tabs>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>
 <script>
export default {
  data() {
    return {
      activeName: ""
    };
  },
  watch: {
    activeName() {
      localStorage.setItem("activeName", this.activeName);
    }
  },
  created() {
    // console.log(this.activeName)
    this.activeName = localStorage.getItem("activeName");
    if (this.activeName == "rec") {
      this.$router.push({
        name: "rec"
      });
    } else if (this.activeName == "hotSong") {
      this.activeName = "rec";
      this.$router.push({
        name: "rec"
      });
    } else if (this.activeName == "search") {
      this.activeName = "rec";
      this.$router.push({
        name: "rec"
      });
    }
    localStorage.removeItem("activeName");
  },
  methods: {
    onClick(name) {
      if (name == "rec") {
        this.activeName = "rec";
        this.$router.push({
          name: "rec"
        });
      } else if (name == "hotSong") {
        this.activeName = "hotSong";
        this.$router.push({
          name: "hotSong"
        });
      } else if (name == "search") {
        this.activeName = "search";
        this.$router.push({
          name: "search"
        });
      }
    }
  }
};
</script>
<style lang="scss">
@function vm($px) {
  @return ($px / 375) * 100vw;
}
.app {
  margin-top: 119px;
}
.box {
  width: 100%;
  background-color: #66cfe4;
  background-image: linear-gradient(45deg, #c8ea64, transparent);
  position: fixed;
  left: 0;
  top: 0;
  height: 118px;
  z-index: 999;
  .img-box {
    width: vm(180);
    padding: vm(8);
    img {
      width: 100%;
      height: 100%;
      font-size: 0px;
    }
  }
  .box-top {
    width: 100%;
    height: 100px;
  }
  .nav {
    background-color: white;
    .van-tab--active {
      color: #6cd1dc;
      font-weight: 500;
    }
    .van-tabs__line {
      position: absolute;
      bottom: 15px;
      left: 0;
      z-index: 1;
      height: 3px;
      background-color: #6cd1dc;
      border-radius: 3px;
    }
  }
}
</style>